<template>
  <div class="search-container">
    <div class="search-header">
      <h2 class="section-title">音乐搜索</h2>
      <SearchBar 
        @search="handleSearch"
      />
    </div>
    <SearchResults 
      :loading="loading"
      :results="searchResults"
      :error="error"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { searchMusic } from '@/api/music'
import type { Music } from '@/stores/player'
import SearchBar from '@/components/search/SearchBar.vue'
import SearchResults from '@/components/search/SearchResults.vue'

const searchResults = ref<Music[]>([])
const loading = ref(false)
const error = ref('')
const route = useRoute()

const handleSearch = async (keyword: string) => {
  if (!keyword.trim()) {
    searchResults.value = []
    return
  }

  loading.value = true
  error.value = ''
  
  try {
    const response = await searchMusic(keyword)
    if (response.success && response.data) {
      searchResults.value = response.data
    } else {
      error.value = response.message
    }
  } catch (err) {
    error.value = '搜索失败，请稍后重试'
  } finally {
    loading.value = false
  }
}

watch(
  () => route.query.keyword,
  (newKeyword) => {
    if (newKeyword && typeof newKeyword === 'string') {
      handleSearch(newKeyword)
    }
  }
)

onMounted(() => {
  const keyword = route.query.keyword
  if (keyword && typeof keyword === 'string') {
    handleSearch(keyword)
  }
})

defineExpose({
  handleSearch
})
</script>

<style scoped lang="scss">
.search-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px;
}

.search-header {
  margin-bottom: 32px;
}

.section-title {
  color: var(--primary-color);
  font-size: 1.8em;
  margin-bottom: 28px;
  font-weight: 600;
  letter-spacing: 0.5px;
  background: linear-gradient(to right, var(--primary-color), var(--theme-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
  text-align: left;

  &::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(to right, var(--theme-color), transparent);
    border-radius: 2px;
  }
}
</style> 